<template>
  <div class="pagination">
    <!-- 上一大页 -->
    <div class="goto_btn" @click="firstPageClick">
      <svg class="icon iconStyle" aria-hidden="true">
        <use xlink:href="#icon-shangyiqu"></use>
      </svg>
    </div>
    <div class="goto_btn" @click="previousPageClick">
      <i class="el-icon-caret-left iconStyle"></i>
    </div>
    <el-input
      type="number"
      :min="1"
      v-model="pageNum"
      class="totlaPage"
      @keyup.enter.native="junkToOtherPage"
      @blur="junkToOtherPage"
    ></el-input>
    <!-- <div class="totlaPage">{{ currentPage }}</div> -->
    <div class="totalPage">{{ `/ ${totalPage}页` }}</div>
    <div class="goto_btn" @click="nextPageClick">
      <i class="el-icon-caret-right iconStyle"></i>
    </div>
    <!-- 下一大页 -->
    <div class="goto_btn" @click="lastPageClick">
      <svg class="icon iconStyle" aria-hidden="true">
        <use xlink:href="#icon-xiayiqu"></use>
      </svg>
    </div>
  </div>
</template>

<script>
import _ from 'lodash'

export default {
  props: {
    // 当前页
    currentPage: {
      type: Number,
      default: 20
    },
    // 总页数
    totalPage: {
      type: Number,
      default: 8
    }
  },
  data() {
    return {
      pageNum: 1
    }
  },
  watch: {
    currentPage(newValue) {
      if (newValue) {
        this.pageNum = this.currentPage
      }
    }
  },
  methods: {
    firstPageClick() {
      if (this.pageNum === 1) {
        this.$message({
          message: '已经是第一页了',
          type: 'warning'
        })
      } else {
        this.$emit('firstPageClick')
      }
    },
    previousPageClick: _.throttle(function () {
      if (this.pageNum - 1 !== 0) {
        this.$emit('previousPageClick')
      } else {
        this.$message({
          message: '已经是第一页了',
          type: 'warning'
        })
      }
    }, 500),
    nextPageClick: _.throttle(function () {
      if (this.pageNum + 1 <= this.totalPage) {
        this.$emit('nextPageClick')
      } else {
        this.$message({
          message: '已经是最后一页了',
          type: 'warning'
        })
      }
    }, 500),
    lastPageClick() {
      if (this.pageNum === this.totalPage || this.totalPage === 0) {
        this.$message({
          message: '已经是最后一页了',
          type: 'warning'
        })
      } else {
        this.$emit('lastPageClick')
      }
    },
    junkToOtherPage() {
      const regEXP = /\./
      if (regEXP.test(this.pageNum)) {
        this.$message({
          message: '要跳转的页数不能为小数',
          type: 'warning'
        })
        this.pageNum = this.currentPage
        return
      } else if (this.pageNum === '') {
        this.pageNum = this.currentPage
        return
      } else if (this.pageNum === this.currentPage) {
        return
      } else if (this.pageNum <= 0) {
        this.$message({
          message: '跳转的页数不能小于1',
          type: 'warning'
        })
        this.pageNum = this.currentPage
        return
      } else if (this.pageNum > this.totalPage) {
        this.$message({
          message: '跳转的页数不能大于总页数',
          type: 'warning'
        })
        this.pageNum = this.currentPage
        return
      }

      this.$emit('junkToOtherPage', this.pageNum)
    }
  }
}
</script>

<style scoped>
.pagination {
  display: flex;
  /* width: 266px; */
  height: 36px;
  margin-left: 24px;
  border: 1px solid #dddddd;
}

.goto_btn {
  width: 32px;
  height: 34px;
  background-color: #f2f2f2;
  border-right: 1px solid #dddddd;
  text-align: center;
  cursor: pointer;
}

.goto_btn:last-child {
  border-right: none;
}

.iconStyle {
  font-size: 14px;
  color: #333;
}

.totalPage {
  /* width: 63px; */
  height: 33px;
  padding: 0 10px;
  background-color: #f2f2f2;
  border-right: 1px solid #dddddd;
  font-size: 14px;
  text-align: center;
}

.totlaPage {
  width: 79px;
  height: 34px;
  border-right: 1px solid #dddddd;
}

.totlaPage >>> .el-input__inner {
  width: 79px;
  height: 33px;
  line-height: 34px;
  border: none;
  border-radius: 0;
  border-right: 1px solid #dddddd;
  text-align: center;
}
</style>
